<template>
    <view class="index home-bg">
        <view class="search-container">
            <navigator hover-class="none" @tap="goPage('/bundle/pages/message_center/message_center')">
                <image class="icon-md" src="/static/images/icon_news.png"> </image>
            </navigator>
            <navigator class="search-wrap" hover-class="none" url="/pages/goods_search/goods_search">
                <u-search wrap-bg-color="transparent" :bg-color="'#fff'" :disabled="true" :height="30"></u-search>
            </navigator>
        </view>
        <view class="contain">
            <view class="main">
                <!-- 轮播图 -->
                <swiper class="banner" circular :indicator-dots="true" :autoplay="true" :interval="3000"
                    :duration="1000">
                    <swiper-item v-for="(item, index) in bannerList" :key="index" @tap="goPage(item.url)">
                        <image :src="item.image" mode="aspectFill"></image>
                    </swiper-item>
                </swiper>
                <!-- 公告 -->
                <view class="announcement-card">
                    <uni-card cover="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg" @click="onClick">
                        <image slot='cover' style="width: 100%;" src="/static/images/9.jpg"></image>
                        <text class="uni-body">我是公告</text>
                        <view slot="actions" class="card-actions" v-if="false">
                            <view class="card-actions-item" @click="actionsClick('分享')">
                                <uni-icons type="plus" size="18" color="#999"></uni-icons>
                                <text class="card-actions-item-text">分享</text>
                            </view>
                            <view class="card-actions-item" @click="actionsClick('点赞')">
                                <uni-icons type="heart" size="18" color="#999"></uni-icons>
                                <text class="card-actions-item-text">点赞</text>
                            </view>
                            <view class="card-actions-item" @click="actionsClick('评论')">
                                <uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
                                <text class="card-actions-item-text">评论</text>
                            </view>
                        </view>
                    </uni-card>
                </view>
                <!-- 分类标题 -->
                <view class="goods">
                    <view class="goods-title">
                        <text class="line"></text>
                        <view class="title-row">
                            <uni-icons type="list" size="24" color="#ff4d4f"></uni-icons>
                            <text class="bold xxl">分类</text>
                        </view>
                        <text class="line"></text>
                    </view>
                </view>
                <!-- 分类入口 -->
                <view class="nav" :style="'height:' + navSwiperH + 'rpx;'" v-if="navList.length">
                    <view class="nav-list">
                        <view class="nav-item" v-for="(item, index) in navList" :key="index" @tap="tapMenu(item)">
                            <!-- <image class="nav-item-icon" :src="item.commodityImage || '/static/images/default_icon.png'"></image> -->
                            <image class="nav-item-icon" src="https://static.fx168api.com/img/user/40b4dc31e46c24c14121e5268d0fac8c/20230507221137427.png"></image>
                            <view class="name">{{ item.commodityName }}</view>
                        </view>
                    </view>
                </view>

            </view>
            <!-- 好物优选 -->
           <!-- <view class="goods" v-if="goodsList.length">
                <view class="goods-title">
                    <text class="line"></text>
                    <view class="title-row">
                        <image class="icon" src="/static/images/icon_like.png"></image>
                        <text class="bold xxl">新品推荐</text>
                    </view>
                    <text class="line"></text>
                </view>
                <goods-list :list="goodsList"></goods-list>
                <loading-footer :status="status"></loading-footer>
            </view> -->

        </view>

        <u-back-top :scroll-top="scrollTop" :top="1000" :customStyle="{
            backgroundColor: '#FFF',
            color: '#000',
            boxShadow: '0px 3px 6px rgba(0, 0, 0, 0.1)'
        }"></u-back-top>
    </view>
</template>

<script>
import homeData from './home.json'
import {
    getGoodsInfo
} from '@/api/goods/goods.js'
const trottle = (func, time = 1000, context) => {
    let previous = new Date(0).getTime();
    return function (...args) {
        let now = new Date().getTime();
        if (now - previous > time) {
            func.apply(context, args);
            previous = now;
        }
    };
}
export default {
    data() {
        return {
            scrollTop: 0,
            navSwiperH: 374,
            currentSwiper: 0,
            page: 1,
            status: 'loading',
            navList: [],
            goodsList: [],
            bannerList: [
                {
                    image: 'https://henanhanyong.oss-cn-beijing.aliyuncs.com/2025/01/11/a7bc3138-a48a-4bf8-ba3d-7fb6e72e1f90.jpg',
                    url: '/pages/goods_list/goods_list?id=1'
                },
                {
                    image: 'https://henanhanyong.oss-cn-beijing.aliyuncs.com/2025/01/11/443046ef-8794-4716-99d1-3c960c103055.jpg',
                    url: '/pages/goods_list/goods_list?id=2'
                },
                {
                    image: 'https://henanhanyong.oss-cn-beijing.aliyuncs.com/2025/01/11/62408c1f-4f5d-470b-a2c2-5265e700b0e6.jpg',
                    url: '/pages/goods_list/goods_list?id=3'
                }
            ]
        }
    },
    async onLoad(options) {
        this.onPageScroll = trottle(this.onPageScroll, 500, this)
        this.getMenuFun()
        this.getBestListFun()
    },
    onShow() {
    },
    onReachBottom() {
        this.getBestListFun()
    },
    
    onPullDownRefresh() {
        // this.getMenuFun()
    },
    onPageScroll(e) {
        const top = uni.upx2px(100)
        const { scrollTop } = e
        let percent = scrollTop / top
        this.navBg = percent > 1 ? 1 : percent
        this.scrollTop = scrollTop
    },
    methods: {
        // 获取元素位置
        getRect(selector, all, context) {
            return new Promise(function (resolve) {
                let qurey = uni.createSelectorQuery();

                if (context) {
                    qurey = uni.createSelectorQuery().in(context);
                }

                qurey[all ? "selectAll" : "select"](selector)
                    .boundingClientRect(function (rect) {
                        if (all && Array.isArray(rect) && rect.length) {
                            resolve(rect);
                        }
                        if (!all && rect) {
                            resolve(rect);
                        }
                    })
                    .exec();
            });
        },
        // 获取好物优选
        getBestListFun() {
            let { page, goodsList, status } = this
            if (status === 'finished') return false

            const { code, data } = homeData.getBestList
            uni.stopPullDownRefresh()

            if (code === 1) {
                if (page === 1) goodsList = []
                const { dataList } = data
                goodsList.push(...dataList)
                page++

                // 更新状态
                if (goodsList.length <= 0) {
                    status = 'empty'
                } else if (dataList.length < 10) { // 假设每页10条数据
                    status = 'finished'
                }

                // 更新数据
                this.page = page
                this.goodsList = goodsList
                this.status = status
            } else {
                this.status = 'error'
            }
        },
        // 登录         
        toLogin() {
            uni.navigateTo({
                url: '/pages/login'
            });
        },
        // 点击菜单
        async tapMenu(item) {
            if (!this.isLogin) return this.toLogin()

            const { is_tab, link, link_type } = item;
            switch (link_type) {
                case 1:
                    // 本地跳转
                    if (is_tab) {
                        uni.switchTab({
                            url: link,
                        });
                        return;
                    }
                    uni.navigateTo({
                        url: link,
                    });
                    break;

                case 2:
                    // webview
                    uni.navigateTo({
                        url: "/pages/webview/webview?url=" + link,
                    });
                    break;

                case 3: // tabbar
            }

        },
        // 跳转页面
        goPage(url) {
            if (!this.isLogin) return this.toLogin()
            uni.navigateTo({
                url
            })
        },
        // 获取菜单
        getMenuFun() {
            getGoodsInfo().then(res => {
                const { goodsType } = res
                uni.stopPullDownRefresh()
                if (goodsType.length <= 5) {
                    this.navSwiperH = 200
                } else {
                    this.navSwiperH = 374
                }
                this.navList = goodsType
                // this.navList = res.goodsType.map(v => {
                //     return {
                //         ...v,
                //         name: v.commodityName,
                //     }
                // })
            })
            function arraySlice(data, array = [], optNum = 10) {
                data = JSON.parse(JSON.stringify(data));
                if (data.length <= optNum) {
                    data.length > 0 && array.push(data);
                    return array;
                }
                array.push(data.splice(0, optNum));
                return arraySlice(data, array, optNum);
            }
        },

    },
}
</script>

<style lang="scss">
.index {
    .contain {
        .main {
            position: relative;
            z-index: 9;
            padding: 0 20rpx;

            .banner {
                width: 100%;
                height: 300rpx;
                margin-bottom: 20rpx;
                border-radius: 12rpx;
                overflow: hidden;

                image {
                    width: 100%;
                    height: 100%;
                }
            }

            .goods {
                margin-top: 20rpx;

                .goods-title {
                    height: 100rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .line {
                        width: 58rpx;
                        height: 1px;
                        background-color: #ccc;
                        margin: 0 22rpx;
                    }

                    .title-row {
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        .icon {
                            width: 38rpx;
                            height: 38rpx;
                            margin-right: 10rpx;
                        }

                        .bold {
                            font-weight: bold;
                        }

                        .xxl {
                            font-size: 36rpx;
                        }
                    }
                }
            }

            .nav {
                position: relative;
                border-radius: 14rpx;
                background-color: #fff;
                padding: 20rpx 0;

                .nav-list {
                    display: flex;
                    flex-wrap: wrap;
                    padding: 10rpx;

                    .nav-item {
                        width: 33.33%;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        padding: 16rpx 0;

                        .nav-item-icon {
                            width: 80rpx;
                            height: 80rpx;
                            margin-bottom: 12rpx;
                            border-radius: 50%;
                            background-color: #ffd8d8; // 图标背景色
                        }

                        .name {
                            font-size: 24rpx;
                            color: #333;
                            text-align: center;
                            width: 100%;
                            padding: 0 10rpx;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }

                        &:active {
                            opacity: 0.8;
                            transform: scale(0.95);
                        }
                    }
                }
            }

            .announcement-card {
                margin-top: 20rpx;
            }
        }

        .goods {
            .goods-title {
                height: 100rpx;
                display: flex;
                align-items: center;
                justify-content: center;

                .line {
                    width: 58rpx;
                    height: 1px;
                    background-color: #ccc;
                    margin: 0 22rpx;
                }

                .title-row {
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .icon {
                        width: 38rpx;
                        height: 38rpx;
                        margin-right: 10rpx;
                    }

                    .bold {
                        font-weight: bold;
                    }

                    .xxl {
                        font-size: 36rpx;
                    }
                }
            }
        }
    }
}

.search-container {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 20rpx 0;
    background: url(../../static/images/bg_hometop.png) no-repeat;
    background-size: 100% auto;
    margin-bottom: 20rpx;

    .icon-md {
        margin-left: 30rpx;
        --size: 44rpx;
        min-height: var(--size);
        min-width: var(--size);
        height: var(--size);
        width: var(--size);
        vertical-align: middle;
    }

    .search-wrap {
        margin-left: 20rpx;
        flex: 1;
        margin-right: 20rpx;
    }
}

.uni-card {
    margin: 0 !important;
    padding: 20rpx !important;
}

.card-actions {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    height: 90rpx;
    border-top: 1px #eee solid;
}

.card-actions-item {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.card-actions-item-text {
    font-size: 24rpx;
    color: #666;
    margin-left: 10rpx;
}
</style>
